<template>
  <div>
    <el-dialog title="申请用车" :visible="dialogVisible" width="80%" @close="close">
      <div>
        <el-form ref="form" :rules="rules" :model="formData" label-width="80px">
          <el-row>
            <el-col :sm="12">
              <el-form-item prop="pcount" label="人数">
                <el-input v-model.number="formData.pcount" type="number" min="1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item prop="carcount" label="用车数">
                <el-input v-model.number="formData.carcount" type="number" min="1"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="24">
              <el-form-item prop="reason" label="用车理由">
                <el-input v-model="formData.reason" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="24">
              <el-form-item prop="wf" label="是否往返">
                <el-select v-model="formData.wf" placeholder="是否往返">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="12">
              <el-form-item prop="starttime" label="出发时间">
                <el-date-picker
                  v-model="formData.starttime"
                  type="datetime"
                  placeholder="选择日期时间"
                  :picker-options="startTimeOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item prop="endtime" label="用车时长">
                <!-- <el-date-picker
                  v-model="formData.endtime"
                  type="datetime"
                  placeholder="选择日期时间"
                  :picker-options="endTimeOptions"
                ></el-date-picker>-->
                <el-col :sm="5">
                  <el-input v-model="formData.endtime" placeholder="请输入用车时长"></el-input>
                </el-col>小时
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="12">
              <el-form-item prop="origin" label="出发地点">
                <el-input v-model="formData.origin"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item prop="destination" label="目的地">
                <el-input v-model="formData.destination"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="24">
              <el-form-item label="办理意见">
                <el-input v-model="formData.mark" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="apply">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 * @description 申请用车对话框
 */
import { apply } from "@/api/usecar";
import { dateFormat } from "@/utils/utils";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formData: {
        pcount: 1,
        reason: "",
        carcount: "",
        wf: 1,
        starttime: "",
        endtime: "",
        origin: "",
        destination: "",
        mark: "",
      },
      rules: {
        pcount: [{ required: true, message: "请输入", trigger: "blur" }],
        carcount: [
          {
            required: true,
            validator: this.validator,
            trigger: "blur",
          },
        ],
        reason: [{ required: true, message: "请输入", trigger: "blur" }],
        wf: [{ required: true, message: "请输入", trigger: "blur" }],
        starttime: [{ required: true, message: "请选择", trigger: "blur" }],
        endtime: [{ required: true, message: "请输入", trigger: "blur" }],
        origin: [{ required: true, message: "请输入", trigger: "blur" }],
        destination: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      /* start 结束时间不能大于开始时间 */
      startTimeOptions: {
        disabledDate: (time) => {
          if (this.formData.endtime != "") {
            //  console.log(this.formData.starttime)
            return (
              time.getTime() > new Date(this.formData.endtime).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          } else {
            //还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      // endTimeOptions: {
      //   disabledDate: time => {
      //     if (this.formData.starttime != "") {
      //       return time.getTime() < new Date(this.formData.starttime).getTime();
      //     } else {
      //       //还没有选择开始时间的时候，让他只能选择今天之后的时间包括今天
      //       return time.getTime() < Date.now() - 8.64e7;
      //     }
      //   }
      // }
    };
  },
  methods: {
    validator(rule, value, callback) {
      console.log(this);
      if (
        this.formData.pcount &&
        this.formData.carcount &&
        this.formData.carcount > this.formData.pcount
      ) {
        callback("人数不能大于车辆数");
      } else if (!Number.parseInt(value)) {
        callback("请输入");
      } else {
        callback();
      }
    },
    time(data) {
      data.setTime(data.getTime() + 3600 * 1000 * this.formData.endtime);
      return data;
    },
    apply() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.formData));
          params.starttime = dateFormat(params.starttime);
          let endtimeData = this.time(this.formData.starttime);
          params.endtime = dateFormat(endtimeData);
          try {
            let data = await apply(params);
            this.$refs["form"].resetFields();
            this.$emit("finish", data);
          } catch (error) {
            this.$emit("finish", error);
          }
        }
      });
    },
    close() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>